require("../../assets/css/index.less");
require("./sports-data.less");
require("../../assets/fonts/iconfont.css");
let dom = require("../../utils/dom.js");
let https = require("../../utils/https.js");
let local = require("../../utils/local.js");
import * as echarts from "echarts";
var option;
// 配置项

let op = [];
let po = [];
let bc;
dom.ready(function () {
  dom.jump(".head-pic", "myhome");

  function getUserInfo() {
    //发送ajax获取个人信息
    https.get("/api/user/info", (res) => {
      //判定
      if (res.errno == 0) {
        //解构数据
        let { duration, calorie, clockCount } = res.data;
        dom.$("#clockText1").innerHTML = clockCount;
        dom.$("#clockText2").innerHTML = clockCount;
        dom.$("#km").innerHTML = duration + `<span class="f14">分钟</span>`;
        dom.$("#kc").innerHTML = calorie + `<span class="f14">千卡</span>`;
        dom.$("#kc2").innerHTML = calorie;
        //2.把最新用户信息存储到本地
        local.set("user", res.data);
      }
    });
  }
  getUserInfo();
  https.get("/api/exercise", function (res) {
    if (res.errno == 0) {
      console.log(res.data);
      let xData = res.data.days.map((v) => {
        return v.date.slice(5);
      });
      let yData = res.data.days.map((v) => {
        return v.sumDuration;
      });

      res.data.days.map((v) => {
        op = v.sumDuration;
        po = v.sumMeter;
        bc = v.sumCalorie;
      });
      let arr1 = res.data.days.map((v) => {
        return v.sumCalorie;
      });

      op = res.data.days.map((v) => {
        return v.sumMeter;
      });
      // 近7日运动时长
      echartsData(
        ".seven7",
        (option = {
          title: {
            text: "近七天运动时长",
          },
          xAxis: {
            type: "category",
            data: xData,
          },
          yAxis: {
            type: "value",
          },
          grid: {
            left: "12%",
            right: "4%",
            containLabel: false,
          },
          series: [
            {
              data: yData,
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        })
      );
      // 运动分类
      echartsData(
        ".kind",
        (option = {
          title: {
            text: "运动分类",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
            top: "bottom",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: [
                { value: op, name: "跑步" },
                { value: po, name: "骑行" },
                { value: bc, name: "训练" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        })
      );

      // 近7日训练分类
      echartsData(
        ".seven7-kind",
        (option = {
          title: {
            text: "近7日运动分类",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },

          legend: {
            orient: "vertical",
            left: "right",
            top: "top",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: "category",
            data: xData,
          },
          series: [
            {
              name: "2011",
              type: "bar",
              data: yData,
            },
            {
              name: "2012",
              type: "bar",
              data: arr1,
            },
          ],
        })
      );
      // 近7日训练次数
      echartsData(
        ".seven7-times",
        (option = {
          title: {
            text: "近7日运动次数",
          },
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: op,
              type: "line",
            },
          ],
        })
      );
    }
  });
});

function echartsData(id, aa) {
  var chartDom = dom.getEle(id);
  var myChart = echarts.init(chartDom);
  aa;
  myChart.setOption(option);
}
